<template>
    <div class="ai-chat-page">
        <div class="header">
            <div class="header-buttons">
                <div class="header-button" @click="handleHistoryClick">
                    <div class="button-icon">
                        <img src="@/assets/icons/history-icon.png" alt="历史" />
                    </div>
                    <div class="button-text">历史</div>
                </div>
                <!-- 暂时隐藏收藏按钮 -->
                <!-- <div class="header-button" @click="handleCollectionClick">
                    <div class="button-icon">
                        <img src="@/assets/icons/favorite-icon.png" alt="收藏" />
                    </div>
                    <div class="button-text">收藏</div>
                </div> -->
            </div>
        </div>
        <div ref="contentRef" class="content">
            <!-- AI消息容器 -->
            <!-- 这个容器保留，是必须显示的 -->
            <div class="message-container ai-message">
                <div class="ai-header">
                    <div class="ai-avatar">
                        <img src="@/assets/icons/robot-avatar.png" alt="AI头像" />
                    </div>
                    <div class="ai-name">嗨喵AI智能助手</div>
                </div>
                <div class="message-bubble ai-bubble">
                    Hi,我是嗨喵AI智能助手,很高兴为您服务!如果您在大屏互动方面有任何疑问或需求,欢迎随时与我对话。
                </div>
            </div>
            <!-- 这里开始是引导问题：仅在没有会话时显示 -->
            <div v-if="currentConversationIndex === -1" class="guide-container">
                <div class="guide-header">
                    <div class="guide-icon">
                        <img src="@/assets/icons/help.png" alt="帮助" />
                    </div>
                    <div class="guide-title">猜你想问</div>
                </div>
                <div class="guide-questions">
                    <div 
                        v-for="(question, index) in displayedGuideQuestions" 
                        :key="index" 
                        class="question-item" 
                        @click="handleQuestionClick(question)"
                    >
                        {{ question }}
                    </div>
                </div>
                <div class="guide-footer">
                    <div class="refresh-btn" @click="handleRefreshQuestions">
                        <div class="refresh-icon" :class="{ rotating: isRefreshing }">
                            <img src="@/assets/icons/refresh.png" alt="刷新" />
                        </div>
                        <span>换一批</span>
                    </div>
                </div>
            </div>

            <!-- 这里开始才是对话数据 -->
            <template v-if="currentConversation && currentConversation.history.length > 0">
                <template v-for="(message, index) in currentConversation.history.slice().reverse()" :key="message.id">
                    <!-- 用户消息 -->
                    <div class="message-container user-message">
                        <div class="message-bubble user-bubble">
                            {{ message.query }}
                        </div>
                    </div>

                    <!-- AI消息 -->
                    <div class="message-container ai-message">
                        <div class="ai-header">
                            <div class="ai-avatar">
                                <img src="@/assets/icons/robot-avatar.png" alt="AI头像" />
                            </div>
                            <div class="ai-name">嗨喵AI智能助手</div>
                        </div>
                        <div class="message-bubble ai-bubble">
                            <template
                                v-if="index === currentConversation.history.length - 1 && generating && message.answer === ''">
                                正在生成...
                            </template>
                            <template v-else>
                                <MdPreview :model-value="message.answer" theme="light" preview-theme="default" />
                            </template>
                            <!-- 操作行应在 bubble 内部 -->
                            <!-- <div class="message-operations">
                                <button class="op-btn" type="button" @click="handleCopy(message.answer)"><span
                                        class="op-icon"><img src="@/assets/icons/copy.png" alt="复制" /></span></button>
                                <button class="op-btn" type="button" @click="handleAudioClick(message.id)"><span class="op-icon"><img src="@/assets/icons/audio.png" alt="音频" /></span></button>
                                <button class="op-btn" type="button" @click="handleShare(message.answer)"><span
                                        class="op-icon"><img src="@/assets/icons/share.png" alt="分享" /></span></button>
                            </div> -->
                        </div>
                    </div>
                </template>
            </template>

            <!-- 你可能感兴趣的问题：仅在有对话时显示 -->
            <div v-if="currentConversationIndex !== -1" class="interest-container">
            <div class="interest-header">
                <div class="interest-title">你可能感兴趣</div>
            </div>
                <div class="interest-questions">
                    <div 
                        v-for="(question, index) in displayedInterestQuestions" 
                        :key="index" 
                        class="question-item" 
                        @click="handleInterestQuestionClick(question)"
                    >
                        {{ question }}
                    </div>
                </div>
            </div>
        </div>

        <!-- 功能按钮区域 -->
        <div class="function-buttons">
            <div class="function-button" @click="handleNewConversation">
                <div class="button-icon">
                    <img src="@/assets/icons/new-icon.png" alt="新对话" />
                </div>
                <div class="button-text">新对话</div>
            </div>
        </div>

        <div class="input-container">
            <div class="input-field">
                <input 
                    v-model="inputMessage" 
                    type="text" 
                    placeholder="发消息..." 
                    class="message-input"
                    @keyup.enter="handleSendMessage" 
                />
            </div>
            <div class="input-actions">
                <!-- <div class="action-button voice-button" @click="handleVoiceClick">
                    <div class="voice-icon">
                    </div>
                </div> -->
                <div class="action-button send-button" @click="handleSendClick">
                    <div class="send-icon">
                        <img v-if="inputMessage.trim().length === 0" src="@/assets/icons/send-icon.png" alt="发送" />
                        <img v-else src="@/assets/icons/send-icon-active.png" alt="发送" />
                    </div>
                </div>
            </div>
        </div>

        <!-- 分享弹窗 -->
        <ShareBox 
            v-model:visible="showShareBox" 
            @wechat-share="handleWeChatShare" 
            @generate-image="handleGenerateImage"
            @copy-link="handleCopyLink" 
        />

        <!-- 视频播放器 -->
        <CustomVideo 
            v-model:visible="showVideoPlayer" 
            :video-url="currentVideoUrl" 
            :autoplay="true"
            @video-loaded="() => console.log('视频加载完成')"
            @video-error="(error) => { console.error('视频加载失败:', error); showSimpleMessage('视频加载失败'); }"
        />

    </div>
</template>

<script setup lang="ts">
import { ref, nextTick, watch, onMounted, onUnmounted } from 'vue';
import { MdPreview } from 'md-editor-v3';
import { showSimpleMessage, hideSimpleMessage } from '@/components/mobile/SimpleMessageService';
import { useDialogConversationStore } from "@/stores/dialogConversationStore";
import { useUserStore } from "@/stores/userStore";
import { storeToRefs } from "pinia";
import ShareBox from '@/components/mobile/ShareBox.vue';
import CustomVideo from '@/components/mobile/CustomVideo.vue';
import { useRouter } from 'vue-router';

const dialogConversationStore = useDialogConversationStore();
const userStore = useUserStore();
const router = useRouter();
const { currentConversation, currentConversationIndex, currentConversationId, generating, guideQuestions, interestQuestions } = storeToRefs(dialogConversationStore);
// const { internet } = storeToRefs(dialogConversationStore); // 功能按钮已注释，暂时不需要
const { userId } = storeToRefs(userStore);

// 响应式数据
const inputMessage = ref('');
const contentRef = ref<HTMLElement | null>(null);
const showShareBox = ref(false);
const shareContent = ref('');
const showVideoPlayer = ref(false);
const currentVideoUrl = ref('');
const displayedGuideQuestions = ref<string[]>([]);
const displayedInterestQuestions = ref<string[]>([]);
const isRefreshing = ref(false);

// 自动滚动到底部的函数
const scrollToBottom = () => {
  nextTick(() => {
    if (contentRef.value) {
      contentRef.value.scrollTop = contentRef.value.scrollHeight;
    }
  });
};

// 监听对话变化，自动滚动到底部
watch(
  () => currentConversation.value?.history,
  () => {
    scrollToBottom();
  },
  { deep: true }
);

// 监听生成状态变化，在生成过程中也保持滚动到底部
watch(generating, (isGenerating) => {
  if (isGenerating) {
    scrollToBottom();
  }
});

const refreshInterestQuestions = () => {
  displayedInterestQuestions.value = pickRandomQuestions(interestQuestions.value, 5);
};

// 监听当前对话ID变化，当对话ID不为空且发生变化时，随机抽取5个问题
watch(currentConversationId, (newId, oldId) => {
  if (newId && newId !== oldId) {
    refreshInterestQuestions();
  }
});

// 点击事件处理
const handleHistoryClick = () => {
  console.log('点击了历史按钮');
  router.push('/mobile/history');
};

// 暂时隐藏收藏按钮相关功能
// const handleCollectionClick = () => {
//   console.log('点击了收藏按钮');
// };

// 发送消息的核心逻辑
const sendMessage = async () => {
  const message = inputMessage.value.trim();
  if (!message) {
    console.log('输入框为空，无法发送');
    return;
  }

  // 清空输入框
  inputMessage.value = '';
  
  // 发送消息后立即滚动到底部
  scrollToBottom();

  // 显示"正在生成"提示（duration 设为 0 表示不自动隐藏）
  showSimpleMessage('正在生成...', 0);

  try {
    // 如果当前 index 为 -1，说明没有对话，需要创建新对话
    if (currentConversationIndex.value === -1) {
      console.log('创建新对话并发送消息:', message);
      await dialogConversationStore.newDialogConversationStream(
        userId.value,
        message,
        () => {
          // 处理流式响应数据
          //   console.log('收到数据:', data);
          // 每次收到流式数据时都滚动到底部
          scrollToBottom();
        },
        (error) => {
          // 处理错误
          console.error('发送消息失败:', error);
          // 关闭"正在生成"提示
          hideSimpleMessage();
        },
        () => {
          // 流式响应结束
          console.log('消息发送完成');
          // 响应结束后再次滚动到底部确保完整显示
          scrollToBottom();
          // 关闭"正在生成"提示
          hideSimpleMessage();
          refreshInterestQuestions();
        }
      );
    } else {
      // 已有对话，在现有对话中发送消息
      console.log('在现有对话中发送消息:', message, '对话ID:', currentConversationId.value);
      await dialogConversationStore.sendDialogConversationStream(
        userId.value,
        currentConversationId.value,
        message,
        () => {
          // 处理流式响应数据
          //   console.log('收到数据:', data);
          // 每次收到流式数据时都滚动到底部
          scrollToBottom();
        },
        (error) => {
          // 处理错误
          console.error('发送消息失败:', error);
          // 关闭"正在生成"提示
          hideSimpleMessage();
        },
        () => {
          // 流式响应结束
          console.log('消息发送完成');
          // 响应结束后再次滚动到底部确保完整显示
          scrollToBottom();
          // 关闭"正在生成"提示
          hideSimpleMessage();
          refreshInterestQuestions();
        }
      );
    }
  } catch (error) {
    console.error('发送消息异常:', error);
    // 发生异常时也要关闭"正在生成"提示
    hideSimpleMessage();
  }
};

// 输入相关事件处理
const handleSendMessage = () => {
  sendMessage();
};

// const handleVoiceClick = () => {
//   console.log('点击了语音按钮');
// };

const handleSendClick = () => {
  sendMessage();
};

// 复制 AI 回复并提示
// const handleCopy = async (text: string) => {
//   try {
//     if (!text) {
//       showSimpleMessage('没有可复制的内容')
//       return
//     }
//     await navigator.clipboard.writeText(text)
//     showSimpleMessage('已复制')
//   } catch {
//       showSimpleMessage('复制失败')
//   }
// }

// 分享按钮点击
// const handleShare = (text: string) => {
//   console.log('点击了分享按钮，内容:', text);
//   shareContent.value = text;
//   showShareBox.value = true;
// }

// 分享弹窗事件处理
const handleWeChatShare = () => {
  console.log('微信分享:', shareContent.value);
  showSimpleMessage('微信分享功能开发中');
}

const handleGenerateImage = () => {
  console.log('生成图片:', shareContent.value);
  showSimpleMessage('生成图片功能开发中');
}

const handleCopyLink = () => {
  console.log('复制链接:', shareContent.value);
  showSimpleMessage('复制链接功能开发中');
}

// 音频按钮点击
// const handleAudioClick = async (messageId: string) => {
//   console.log('点击了音频按钮，消息ID:', messageId);
  
//   try {
//     const apiKey = import.meta.env.VITE_AI_CHAT_ACCESS_KEY as string;
    
//     // 调用文字转语音接口
//     const audioBlob = await aiApi.textToAudio({
//       api_key: apiKey,
//       message_id: messageId,
//       user: userId.value
//     });
    
//     console.log('音频响应:', audioBlob);
//     console.log('音频大小:', audioBlob.size, 'bytes');
//     console.log('音频类型:', audioBlob.type);
    
//     // 创建音频 URL
//     const audioUrl = URL.createObjectURL(audioBlob);
    
//     // 创建音频元素并播放
//     const audio = new Audio(audioUrl);
    
//     audio.onloadeddata = () => {
//       console.log('音频加载完成，开始播放');
//       showSimpleMessage('开始播放语音');
//     };
    
//     audio.onended = () => {
//       console.log('音频播放完成');
//       URL.revokeObjectURL(audioUrl);
//     };
    
//     audio.onerror = (e) => {
//       console.error('音频播放错误:', e);
//       URL.revokeObjectURL(audioUrl);
//     };
    
//     await audio.play();
    
//   } catch (error) {
//     console.error('文字转语音失败:', error);
//   }
// }

// 功能按钮点击事件
const handleNewConversation = () => {
  console.log('点击了新对话按钮');
  // 重置为没有对话的状态
  currentConversationId.value = '';
  currentConversationIndex.value = -1;
  showSimpleMessage('开始新对话');
};

// const handleWebSearch = () => {
//   // 切换联网搜索状态
//   internet.value = !internet.value;
//   console.log('联网搜索状态切换为:', internet.value);
// };

// const handleBackToTop = () => {
//   // 滚动到顶部
//   if (contentRef.value) {
//     contentRef.value.scrollTo({
//       top: 0,
//       behavior: 'smooth'
//     });
//   }
//   console.log('回到顶部');
// };

/*
// 格式化消息，将"视频教程："后的URL转换为可点击链接（只包裹URL本身）
const formatMessageWithLinks = (text: string) => {
  if (!text) return '';

  // 同时支持中文冒号（：）和英文冒号（:）
  const prefixRegex = /视频教程[:：]/;
  const prefixMatch = text.match(prefixRegex);
  if (!prefixMatch || prefixMatch.index === undefined) return text;

  const prefixIndex = prefixMatch.index;
  const start = prefixIndex + prefixMatch[0].length;
  const rest = text.slice(start);

  // URL 匹配：直到遇到空白、换行或常见中文标点为止
  const urlMatch = rest.match(/https?:\/\/[^\s\u3000\u00A0\uFF0C\u3001\u3002\uFF1B\uFF01\uFF1F]+/);
  if (!urlMatch) return text;

  const url = urlMatch[0];
  const before = text.slice(0, start);
  const after = rest.slice(url.length); // 剩余文本保持原样（包含空格/换行）

  const linkHtml = `<a href="javascript:void(0);" class="video-link" onclick="window.handleVideoLinkClick('${url}')">${url}</a>`;
  return `${before}${linkHtml}${after}`;
};
*/

// 处理视频链接点击（需要挂载到window对象上，以便v-html中的onclick能访问）
const handleVideoLinkClick = (url: string) => {
  console.log('视频链接:', url);
  currentVideoUrl.value = url;
  showVideoPlayer.value = true;
};

// 扩展Window接口
declare global {
  interface Window {
    handleVideoLinkClick?: (url: string) => void;
  }
}

// 在组件挂载时将函数挂载到window对象
onMounted(() => {
  window.handleVideoLinkClick = handleVideoLinkClick;
});

onUnmounted(() => {
  delete window.handleVideoLinkClick;
});

// 引导问题相关逻辑
const handleQuestionClick = async (question: string) => {
  console.log('点击了问题:', question);
  
  // 重置当前对话状态为初始状态
  currentConversationId.value = '';
  currentConversationIndex.value = -1;
  
  // 设置输入框内容为问题
  inputMessage.value = question;
  
  // 自动发送消息
  await sendMessage();
};

// 从全量引导问题中随机抽取n条（默认5）
const pickRandomQuestions = (source: string[], count = 5): string[] => {
  if (!Array.isArray(source) || source.length === 0) return [];
  const n = Math.min(count, source.length);
  const indices = new Set<number>();
  while (indices.size < n) {
    indices.add(Math.floor(Math.random() * source.length));
  }
  const picked = Array.from(indices).map(i => source[i]).filter((q): q is string => typeof q === 'string');
  return picked;
};

const handleRefreshQuestions = () => {
  // 开始旋转动画
  isRefreshing.value = true;
  
  // 刷新问题
  displayedGuideQuestions.value = pickRandomQuestions(guideQuestions.value, 5);
  
  // 动画结束后停止旋转
  setTimeout(() => {
    isRefreshing.value = false;
  }, 600); // 与CSS动画时长保持一致
};

// interest 问题相关逻辑
const handleInterestQuestionClick = async (question: string) => {
  console.log('点击了interest问题:', question);
  
  // 检查是否有当前对话
  if (currentConversationIndex.value === -1) {
    console.log('没有当前对话，无法发送消息');
    showSimpleMessage('请先开始一个对话');
    return;
  }
  
  // 显示"正在生成"提示
  showSimpleMessage('正在生成...', 0);
  
  // 发送消息后立即滚动到底部
  scrollToBottom();
  
  try {
    // 直接在当前对话中发送消息
    console.log('在现有对话中发送interest问题:', question, '对话ID:', currentConversationId.value);
    await dialogConversationStore.sendDialogConversationStream(
      userId.value,
      currentConversationId.value,
      question,
      () => {
        // 处理流式响应数据
        // 每次收到流式数据时都滚动到底部
        scrollToBottom();
      },
      (error) => {
        // 处理错误
        console.error('发送消息失败:', error);
        // 关闭"正在生成"提示
        hideSimpleMessage();
      },
      () => {
        // 流式响应结束
        console.log('消息发送完成');
        // 响应结束后再次滚动到底部确保完整显示
        scrollToBottom();
        // 关闭"正在生成"提示
        hideSimpleMessage();
        refreshInterestQuestions();
      }
    );
  } catch (error) {
    console.error('发送消息异常:', error);
    // 发生异常时也要关闭"正在生成"提示
    hideSimpleMessage();
  }
};


// 初始化时抽取一批
onMounted(() => {
  // 从本地恢复对话列表
  dialogConversationStore.getConversationLocal();
  console.log('本地历史对话:', dialogConversationStore.conversationList);
  // 初始化引导问题
  displayedGuideQuestions.value = pickRandomQuestions(guideQuestions.value, 5);
  // 初始化感兴趣的问题
  refreshInterestQuestions();
});

</script>

<style lang="scss" scoped>
// 移动端样式 - 基于750px设计稿
// 所有的 px 单位会被自动转换为 vw

.ai-chat-page {
  width: 750px;
  height: 100vh; // 使用固定高度
  background: linear-gradient( 180deg, #E3F1FF 0%, #EEF0F6 100%, #DBEAFF 100%);
  padding-top: 88px; // 为固定header留出空间
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden; // 防止整个页面滚动

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px 32px;

    .header-buttons {
      display: flex;
      flex-direction: row;
      gap: 10px;

      .header-button {
        height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 8px;

        .button-icon {
          width: 35px;
          height: 35px;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .button-text {
          font-size: 22px;
          color: #000;
          font-weight: bold;
          line-height: 1;
        }
      }
    }
  }

  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 32px 32px;
    margin-top: 32px;
    max-height: calc(100vh - 88px - 64px - 120px - 120px); // 为功能按钮区域留出空间
    width: 100%;
    
    // 优化滚动体验
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; // 平滑滚动
    
    // 自定义滚动条样式（可选）
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.3);
    }
  }

  // 引导问题容器样式
  .guide-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    background: linear-gradient(270deg, rgba(72, 111, 255, 0.2) 0%, rgba(86, 165, 238, 0.2) 100%);
    border-radius: 0px 18px 18px 18px;
    border: 1px solid #76BBFF;
    padding: 20px 24px;
    margin-bottom: 32px;
    
    .guide-header {
      display: flex;
      align-items: center;
      margin-bottom: 24px;
      
      .guide-icon {
        width: 48px;
        height: 48px;
        margin-right: 16px;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      
      .guide-title {
        font-size: 32px;
        color: #4974FE;
        font-weight: bold;
      }
    }
    
    .guide-questions {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 24px;
      // 让子元素不被拉伸为100%宽度
      align-items: flex-start;
      
      .question-item {
        // 基于内容自适应宽度，但最长不超过容器
        display: inline-block;
        width: auto;
        max-width: 100%;
        background: #fff;
        border-radius: 12px;
        padding: 20px 24px;
        font-size: 28px;
        font-weight: bold;
        color: #000000;
        line-height: 1;
        cursor: pointer;
        transition: all 0.2s ease;
        // 长文本自动换行
        overflow-wrap: anywhere;
        word-break: break-word;
      }
    }
    
    .guide-footer {
      display: flex;
      justify-content: flex-end;
      // 在纵向flex容器中让该行靠右
      align-self: flex-end;
      
      .refresh-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 28px;
        color: #4974FE;
        transition: all 0.2s ease;
        
        .refresh-icon {
          width: 28px;
          height: 28px;
          transition: transform 0.3s ease;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
          
          &.rotating {
            animation: rotate360 0.6s ease-in-out;
          }
        }
        
        @keyframes rotate360 {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      }
    }
  }

  // 你可能感兴趣的问题容器样式
  .interest-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    padding: 20px 24px;
    margin-bottom: 32px;
    
    .interest-header {
      margin-bottom: 24px;
      
      .interest-title {
        font-size: 28px;
        color: #4974FE;
      }
    }
    
    .interest-questions {
      display: flex;
      flex-direction: column;
      gap: 16px;
      // 让子元素不被拉伸为100%宽度
      align-items: flex-start;
      
      .question-item {
        // 基于内容自适应宽度，但最长不超过容器
        display: inline-block;
        width: auto;
        max-width: 100%;
        background: #fff;
        border-radius: 12px;
        padding: 20px 24px;
        font-size: 28px;
        font-weight: bold;
        color: #000000;
        line-height: 1;
        cursor: pointer;
        transition: all 0.2s ease;
        // 长文本自动换行
        overflow-wrap: anywhere;
        word-break: break-word;
      }
    }
  }

  // 消息容器样式
  .message-container {
    margin-bottom: 32px;
    
    &.ai-message {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      
      .ai-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        
        .ai-avatar {
          width: 68px;
          height: 68px;
          margin-right: 16px;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        
        .ai-name {
          font-size: 32px;
          color: #000;
          font-weight: bold;
        }
      }
      
      .ai-bubble {
        background: #fff;
        color: #000;
        padding: 24px 32px;
        border-radius: 0px 18px 18px 18px;
        font-size: 32px;
        line-height: 1.5;
        max-width: 100%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        // 允许长链接在容器内换行，避免溢出
        overflow-wrap: anywhere;
        word-wrap: break-word;
        word-break: break-word;
      }

      // AI 气泡内部的操作按钮行，默认隐藏
      // .message-operations {
      //   border-top: 2px solid #E5E5E5;
      //   padding: 20px 0px;
      //   width: 100%;
      //   display: none;
      //   margin-top: 24px;
      //   gap: 12px;
      //   align-items: center;

      //   .op-btn {
      //     width: 75px;
      //     height: 75px;
      //     border: none;
      //     display: flex;
      //     align-items: center;
      //     justify-content: center;
      //     padding: 0;
      //     cursor: pointer;

      //     .op-icon {
      //       width: 100%;
      //       height: 100%;
      //       display: inline-flex;
      //       align-items: center;
      //       justify-content: center;

      //       img {
      //         width: 100%;
      //         height: 100%;
      //         object-fit: contain;
      //         display: block;
      //       }
      //     }
      //     &:nth-child(3) .op-icon { background: #7bd88a; }
      //   }
      // }

      // 只有当气泡具备 message-operation 类时显示
      // .message-bubble.message-operation {
      //   .message-operations {
      //     display: inline-flex;
      //   }
      // }
    }
    
    &.user-message {
      display: flex;
      justify-content: flex-end;
      
      .user-bubble {
        background: linear-gradient(90deg, #486FFF 0%, #56A4EE 100%);
        color: #fff;
        padding: 24px 32px;
        border-radius: 0px 18px 18px 18px;
        font-size: 32px;
        line-height: 1.5;
        max-width: 100%;
        box-shadow: 0 2px 8px rgba(17, 49, 255, 0.3);
      }
    }
  }

  // 功能按钮区域样式
  .function-buttons {
    position: fixed;
    width: 678px;
    bottom: 170px; // 位于输入框上方
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 18px;
    z-index: 1000;
    
    .function-button {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 16px;
      padding: 16px 24px;
      min-width: 160px;
      gap: 4px;
      cursor: pointer;
      
        .button-icon {
          width: 32px;
          height: 32px;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      
      .button-text {
        font-size: 28px;
        color: #000;
        font-weight: bold;
        text-align: center;
        letter-spacing: 2px;
        
        &.active {
          color: #4870FF;
        }
      }
    }
  }

  // 输入容器样式
  .input-container {
    width: 678px;
    height: 96px;
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0px 45px;
    background: #fff;
    border-radius: 48px;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 1000;
    
    .input-field {
      flex: 1;
      
      .message-input {
        width: 100%;
        border: none;
        outline: none;
        font-size: 32px;
        color: #000;
        background: transparent;
        
        &::placeholder {
          color: #6f6f6f;
        }
      }
    }
    
    .input-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .action-button {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        
        &:active {
          transform: scale(0.95);
        }
        
        &.voice-button {
          background: #f5f5f5;
          
          .voice-icon {
            width: 32px;
            height: 32px;
            background: #999;
            border-radius: 4px;
          }
        }
        
        &.send-button {
          
          .send-icon {
            width: 100%;
            height: 100%;
            
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
        }
      }
    }
  }

  .test-btn {
    background: #fff;
    color: #000;
    padding: 20px 40px;
    cursor: pointer;
    display: inline-block;
    margin: 20px;
  }
}

// 视频链接样式（使用:deep()穿透scoped）
:deep(.video-link) {
  color: #4870FF;
  text-decoration: underline;
  cursor: pointer;
  // 允许链接本身在任意位置断行，配合容器规则
  overflow-wrap: anywhere;
  word-break: break-all;
  
  &:hover {
    color: #365ECF;
  }
  
  &:active {
    color: #2A4DAD;
  }
}
</style>

